<!--
 * @Author: chunlai
 * @Date: 2025-07-02 11:25:05
 * @LastEditTime: 2025-09-11 09:24:20
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\index\feecount\InsuFeePreCount.vue
 * @Description: 保费预试算集合
-->
<template>
  <div class="ms-popup-mask" v-if="pageLoad">
    <div class="common_pop_main">
      <div class="pop_head_line">
        保费试算
        <MsImgIcon
          name="cross"
          size="16"
          class="back_btn"
          @click.native="$emit('close')"
        />
      </div>
      <div class="pop_conts_box">
        <UserModule ref="userModuleRef" />
        <FeeNewUiCount v-if="compEngName === 'ansheng'" />
        <PlanRiskModal v-else></PlanRiskModal>
      </div>
      <div class="pop_foot_btns">
        <div
          class="price_box"
          :class="[Number(totalPrem) <= 0 ? 'nocount' : '']"
        >
          <span class="price-value">{{ Number(totalPrem).toFixed(2) }}</span>
          <div class="price-label-unit">元/首年</div>
        </div>
        <div class="one_btn" @click="toApply">立即请款</div>
      </div>
    </div>
    <RrwebIgnorePop
      ref="ignoreRef"
      @close="recharge = false"
      @save="
        recharge = false;
        toSaveForm();
      "
      v-if="recharge"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserModule from "./UserModule";
import PlanRiskModal from "./PlanRiskModal";
import FeeNewUiCount from "./FeeNewUiCount";
import RrwebIgnorePop from "./RrwebIgnorePop";
import { dateToString } from "@/methods/date.js";
export default {
  name: "InsuFeePreCount",
  components: {
    UserModule,
    PlanRiskModal,
    FeeNewUiCount,
    RrwebIgnorePop,
  },
  data() {
    return {
      recharge: false,
      pageLoad: false,
    };
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      tbBirthMax: "infoReg/tbBirthMax",
      bbrApiReg: "infoReg/bbrApiReg",
      totalPrem: "insert/totalPrem",
      applicant: "insert/applicant",
      bbrMultList: "insert/bbrMultList",
      bbrRefresh: "common/bbrRefresh",
      bbrMaxNum: "page/bbrMaxNum",
      bbrAutoHealthApi: "page/bbrAutoHealthApi",
    }),
    canAddBtnMore() {
      let res = true;
      const numLen = this.bbrMultList.length;
      if (numLen >= this.bbrMaxNum) {
        res = false;
      }
      return res;
    },
    disEditUserInfo() {
      let res = false;
      if (this.bbrMultList[0].idNum) {
        res = true;
      }
      return res;
    },
  },
  watch: {},
  created() {
    /**防止页面滑动 */
    // let that = this;
    // document.body.addEventListener("touchmove", that.cancelEvent, {
    //   passive: false,
    // });
    // document.body.classList.add("van-overflow-hidden");
  },
  beforeDestroy() {
    // let that = this;
    // document.body.removeEventListener("touchmove", that.cancelEvent, {
    //   passive: false,
    // });
    // document.body.classList.remove("van-overflow-hidden");
  },
  mounted() {},
  methods: {
    cancelEvent(e) {
      e.preventDefault();
    },
    initModule() {
      if (!this.applicant.birthDate) {
        const birthStr = dateToString(this.tbBirthMax);
        this.$store.commit("insert/UPDATE_APPLICANT", {
          age: this.$GlobalFuns.userAge(birthStr),
          birthDate: birthStr,
        });
      }
      this.$nextTick(() => {
        this.pageLoad = true;
      });
    },
    addUserItem() {
      if (!this.canAddBtnMore) {
        return this.$toast("根据保司要求,被保人个数已达上限");
      }
      this.$store.dispatch("insert/addNewBbr");
    },
    async toApply() {
      let flag = await this.$refs.userModuleRef.validateForm();
      if (!flag.status) return;
      // return console.log("去打款", flag);
      // 1.保存数据
      this.recharge = true;
      this.$nextTick(() => {
        this.$refs.ignoreRef.initModal("2");
      });
    },
    toSaveForm() {
      this.$store
        .dispatch("apis/userSaveApi", this.apiComParams)
        .then((data) => {
          if (data.code == "1") {
            this.$store
              .dispatch("apis/riskSaveApi", this.apiComParams)
              .then((res) => {
                if (res.code == "1") {
                  this.checkOthers();
                } else {
                  this.$msAlert(res.msg);
                }
              });
          } else {
            this.$msAlert(data.msg);
          }
        });
    },
    checkOthers() {
      if (this.bbrApiReg.hasOwnProperty("healthyStatus")) {
        const notPass = this.bbrMultList.find((e) => e.healthyStatus == "0");
        if (notPass) {
          if (this.bbrAutoHealthApi == "1") {
            this.toSmartHealthy();
          } else {
            this.$dialog.alert({
              title: `被保险人健康告知不通过`,
              message: "不能进行投保",
              confirmButtonColor: "#DA251E",
              confirmButtonText: "确认",
            });
          }
          return;
        }
      }
      // 2. 余额判断
      this.validateRecharge();
    },
    validateRecharge() {
      this.$store.dispatch("apis/queryRechargeMoney").then((data) => {
        if (Number(this.totalPrem) > Number(data.money)) {
          this.recharge = true;
          this.$nextTick(() => {
            this.$refs.ignoreRef.initModal("1");
          });
        } else {
          // 3.去打款
          console.log("去打款----");
          this.$store.dispatch("common/toBldRemitPage");
        }
      });
    },
    toSmartHealthy() {
      let params = {
        ...this.apiComParams,
        fullBackUrl: `https://wxou.mschn.cn${window.location.pathname}${window.location.search}${window.location.hash}`,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "getHealthNoticeUrl",
          toast: true,
        })
        .then((res) => {
          if (res.url) {
            this.autoHealthyPop(res.url);
          } else {
            this.validateRecharge();
          }
        });
    },
    autoHealthyPop(autoUrl) {
      this.$dialog
        .confirm({
          title: `被保险人健康告知不通过`,
          message:
            "本保障产品支持被保险人智能核保，如有健康告知所述疾病或状况，请进行智能核保，在线实时审核是否可继续投保",
          confirmButtonColor: "#DA251E",
          confirmButtonText: "智能核保",
        })
        .then(() => {
          window.location.href = autoUrl;
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.ms-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.common_pop_main {
  width: 100%;
  height: 85vh;
  border-radius: 16px 16px 0 0;
  background-color: #fff;
  .pop_head_line {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    font-family: MiSans;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    .back_btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      margin: auto;
    }
  }
  .pop_conts_box {
    width: 100%;
    height: calc(85vh - 110px);
    padding: 5px 0;
    overflow: hidden;
    overflow-y: scroll;
  }
  .pop_foot_btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    .price_box {
      display: flex;
      align-items: flex-end;
      height: 26px;
      line-height: 1;
      color: #d9261d;

      .price-value {
        font-size: 26px;
        line-height: 1;
        font-weight: 600;
        font-family: MiSans;
      }

      &.nocount {
        .price-value {
          color: #999;
        }
      }
      .price-label-unit {
        font-size: 14px;
        margin-left: 2px;
        line-height: 1.3;
      }
    }
    .one_btn {
      color: #ffffff;
      flex: 1;
      max-width: 50%;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      border-radius: 25px;
      background-image: linear-gradient(to right, #ff462c, #cb1800);
    }
  }
}
.user_list_main {
  padding: 0 10px;
}
.add_item_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  .addCell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 40px;
    color: #409eff;
    border-radius: 40px;
    background-color: #ecf5ff;
    border: 1px dashed #b3d8ff;
  }
}
.user_list_md {
  &.disEditForm {
    position: relative;
    &::after {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      z-index: 2;
    }
  }
}
</style>
